<template>
  <div>
    <div class="head">
      <el-input type="textarea" placeholder="请输入内容" v-model="textarea1" maxlength="140" show-word-limit size="medium"
        style="margin-bottom: 10px"></el-input>
      <el-button type="danger" size="medium" @click="send()">评论</el-button>
    </div>
    <div class="content" v-if="data !== null">
      <!-- 热门评论开始 -->
      <div class="hotTitle" v-if="hotData !== null">热门评论</div>
      <div v-for="item in hotData" :key="item.userId" class="contentDesc">
        <div class="avatarUrl">
          <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy />
        </div>
        <div class="top">
          <div class="userDesc">
            <!-- <div class="nickname"></div> -->
            <div class="Desc">{{ item.user.nickname }}:{{ item.content }}</div>
          </div>
        </div>
        <div class="right">
          <div class="timeIcon">
            <div class="time">{{ item.time | dateFormat }}</div>
            <!-- 回复评论 -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <div class="el-icon-chat-dot-square"></div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                  size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
                <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                  @click="restore(item.commentId)">评论</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 最新评论开始 -->
      <div class="title" style="margin-top: 40px">最新评论</div>
      <div v-for="(item, i) in data" :key="i" class="contentDesc">
        <div class="avatarUrl">
          <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy />
        </div>
        <div class="top">
          <div class="userDesc">
            <!-- <div class="nickname"></div> -->
            <div class="Desc">{{ item.user.nickname }}:{{ item.content }}</div>
          </div>
        </div>

        <div class="right">
          <div class="timeIcon">
            <div class="time">{{ item.time | dateFormat }}</div>

            <!-- 回复评论 -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <div class="el-icon-chat-dot-square"></div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                  size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
                <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                  @click="restore(item.commentId)">评论</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 子评论开始 -->
          <div v-for="(item, i) in item.beReplied" :key="i" class="contentDescTwo">
            <!-- 查看子评论 -->
            <div class="userDescTwo">
              <div class="avatarUrlTwo">
                <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy></el-image>
              </div>
              <!-- <div class="nickname"></div> -->
              <div class="Desc">
                {{ item.user.nickname }}:{{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器开始 -->
      <div class="block">
        <el-pagination @current-change="handleCurrentChange" :page-size="20" layout="total , prev, pager, next"
          :total="count">
        </el-pagination>
      </div>


    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  mounted() {
    this.getData();
  },
  computed: {
    ...mapState(['songList']), // 读取VUEX中的状态
  },
  data() {
    return {
      id: null,
      limit: 20, // 单页数量
      offset: 0, // 页数
      textarea1: '', // 评论内容
      textarea2: '', // 回复内容
      data: null,
      hotData: null,
      count: 0,
      time: null,
      rightShow: false,
    };
  },
  watch: {
    songList(newVal, oldVal) {
      this.getData()
    },
  },
  methods: {
    ...mapActions(['saveUserId']),
    async getData() {
      this.$api
        .playListCom({
          id: this.songList.songList.id,
          limit: this.limit,
          offset: this.offset,
          timestamp: this.$utils.timestamp(),
          cookie: localStorage.getItem('cookie'),
        })
        .then((ret) => {
          this.data = ret.comments;
          if (ret.hotComments.length > 0) {
            this.hotData = ret.hotComments;
          }
          this.count = ret.total;
          this.$emit('count', this.count); // 向父组件传值
        });
    },

    // 翻页
    handleCurrentChange: debounce(function (e) {
      this.offset = (e - 1) * 20;
      if (this.offset > this.count) {
        this.offset = (e - 1) * 20 - (this.offset - this.count) - 1;
        this.getData();
      } else {
        this.getData();
      }
       
    }, 1000),

    // 给歌单发送评论
    async send() {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea1 === '') {
        this.$message.error('评论内容不能为空!!!');
      } else {
        this.$api
          .sendComment({
            type: 2, // 歌单模式
            id: this.songList.songList.id,
            content: this.textarea1,
            cookie: localStorage.getItem('cookie'),
          })
          .then((ret) => {
            this.$message({
              message: '评论成功',
              type: 'success',
            });
            this.textarea1 = '';
            this.timer = setTimeout(() => {
              this.getData();
            }, 500);
          });
      }
    },

    // 回复评论
    async restore(e) {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea2 === '') {
        this.$message.error('回复内容不能为空!!!');
      } else {
        this.$api
          .resComment({
            type: 2,
            id: this.songList.songList.id,
            content: this.textarea2,
            commentId: e,
            cookie: localStorage.getItem('cookie'),
          })
          .then((ret) => {
            this.$message({
              message: '回复成功',
              type: 'success',
            });
            this.textarea2 = '';
            this.timer = setTimeout(() => {
              this.getData();
            }, 500);
          });
      }
    },

    userInfo(e) {
      this.saveUserId({ userid: e.userId })
      this.$router.push('/userPage');
    }
  },
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: end;
  flex-direction: column;
  position: relative;
}

.head .el-button {
  width: 80px;
}

.content {
  margin-top: 40px;
  margin-bottom: 80px;
}

.top {
  display: flex;
  margin-left: 60px;
  align-items: center;
}

.title,
.hotTitle {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.contentDesc {
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid gainsboro;
}

.contentDescTwo {
  width: 100%;
  position: relative;
  background: gainsboro;
  border-radius: 10px;
}

.avatarUrlTwo .el-image {
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.avatarUrl .el-image {
  position: absolute;
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.right {
  display: flex;
  flex-direction: column;
}

.userDesc {
  display: flex;
  margin-bottom: 20px;
}

.userDescTwo {
  display: flex;
  align-items: center;
}

.el-icon-chat-dot-square {
  font-size: 20px;
}

.timeIcon {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #000000;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-dropdown-menu {
  padding: 20px;
}

.time {
  height: 100%;
  margin-left: 60px;
}
</style>
